<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
</head>
<body>
<div id="app">
    <div id="box">
        {{message}}
    </div>
    <div id="message">{{message2}}</div>
    <input v-model="message2" >
</div>
</body>
<script src="../../../lib/vue.js"></script>
<script>
    /*
     *  生命周期：
     *     1. create
     *          数据被创建
     *     2. mount
     *          数据被渲染到模板
     *     3. update
     *          数据更新
     *     4. destroy
     *          vue实例销毁
     *
     *     生命周期函数/钩子
     *        beforeCreate
     *        created
     *        beforeMount 数据创建、模板渲染未完成
     *        mounted

     *        beforeUpdate
     *        updated
     *        beforeDestroy
     *        destroyed    ---- 解除了vue实例和页面之间的关联
    * */
    var app = new Vue({
        el:'#app',
        data:{
             message:'hello',
             message2:'hello again'
        },beforeCreate:function () {
            console.log(this.message);
            var html = document.getElementById('box')
            console.log(html.innerHTML);
        },created:function () {
            console.log(this.message);
            var html = document.getElementById('box')
            console.log(html.innerHTML);
        },beforeMount:function () {
            console.log(this.message);
            var html = document.getElementById('box')
            console.log(html.innerHTML);
        },mounted:function () {
            console.log(this.message);
            var html = document.getElementById('box')
            console.log(html.innerHTML);
        },beforeUpdate:function () {
            console.log(this.message2);
            var html = document.getElementById('message');
            console.log("beforeUpdate:"+html.innerHTML);
        },updated:function () {
            console.log(this.message2);
            var html = document.getElementById('message');
            console.log("updated："+html.innerHTML);
        }

    })

</script>
</html>